import React, { Component } from 'react';
import { Table, Message } from '@alifd/next';
import IceContainer from '@icedesign/container';
import eventProxy from '../../../../../libs/eventProxy';
import { Forest } from '../../../../../libs/Tree';
import { areas, update, del } from '../../../../../api/Area';
import DeleteBalloon from '../../../../../libs/DeleteBalloon';
import EditDialog from '../EditDialog';
  
export default class TreeTable extends Component {
  static displayName = 'TreeTable';

  static propTypes = {
  };
   myprops={};
  static defaultProps = {};
  constructor(props) {
    super(props);
    this.state = {
      sourceData: [],
      showData: [],
    };
  }

  componentWillMount() {
    eventProxy.on('area:list:change', () => {
      this.updateTable();
    });
  }

  componentDidMount() {
    this.updateTable();
  }
  updateTable(){
    areas().then((response) => {
      const data = response.data.data;
      const roots = this.dataToTree(data);
      this.setState({
        sourceData: data,
        showData: roots,
      });
    });
  }
  dataToTree= (dataSource) => {
    const forest = new Forest();
    dataSource.forEach((menu) => {
        menu.pid = menu.parentId;
        menu.children = [];
        forest.init(menu);
    });
    return forest.roots;
  }

  onConfirm = (id) => {
    del({
      params: {
        ids: id,
      },
    }).then((response) => {
      const data = response.data;
      if (data.code === 200){
        Message.success('删除成功');
        eventProxy.trigger('area:list:change', this.state.systemCode);
      } else {
        Message.warning('删除失败');
      }
    });
  }
  getFormValues = (dataIndex, values) => {
    const items = {
      id: values.id,
      name: values.name,
      sort: values.sort,
      code: values.code,
      type: values.type,
    };
    update(items).then((response) => {
      const code = response.data.code;
      if (code === 200) {
        Message.success('修改成功');
        // 刷新列表
        const sources = this.state.sourceData;
        for (let index = 0; index < sources.length; index++) {
          const ele = sources[index];
          if (ele.id === values.id) {
            sources[index] = values;
            break;
          }
        }
        const shows = this.dataToTree(sources);
        this.setState({
          showData: shows,
        });
      }
    });
  }
  render() {
    const isZebra = true;
    const roots = [];
    this.state.showData.forEach((ele) => {
      roots.push(ele.id);
    });
    const renderOpt = (value, index, record) => {
      return (
        <span>
          <EditDialog
            index={index}
            record={record}
            getFormValues={this.getFormValues}
          />
        <DeleteBalloon handleRemove={() => this.onConfirm(record.id)} />
        </span>
      );
  };

  const renderType = (value, index, record) => {
    let label = '';

    switch (value) {
      case '0':
        label = '国家';
        break;
      case '1':
        label = '省';
        break;
      case '2':
        label = '市';
        break;
      case '3':
        label = '区县';
        break;
      default:
        break;
    }

    return (
      <span>
        {label}
      </span>
    );
  };
    return (

      <IceContainer>
        <Table
          dataSource={this.state.showData}
          primaryKey="id"
          isTree
          
          isZebra={isZebra}
          align="center"
          rowSelection={{ onChange: () => {} }}
        >
          <Table.Column title="区域名称" dataIndex="name" />
          <Table.Column title="区域代码" dataIndex="code" />
          <Table.Column title="区域类型" dataIndex="type" cell={renderType} />
          <Table.Column title="备注" dataIndex="remarks" />
          <Table.Column title="编辑" cell={renderOpt} />
        </Table>
      </IceContainer>
    );
  }
}
